<template>
  <!-- 特殊新增修改的客户表单 -->
  <el-dialog
    v-model="openCustomeInfo"
    :title="addTitle"
    :close-on-click-modal="false"
    class="spacialForm"
  >
    <el-form
      ref="editForm"
      v-loading="loading"
      :rules="rules"
      label-width="120px"
      inline
      :model="form"
    >
      <el-form-item label="客户全称" prop="wholeName">
        <el-input
          v-model="form.wholeName"
          clearable
          placeholder="请输入客户全称"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户简称" prop="customerName">
        <el-input
          v-model.trim="form.customerName"
          autocomplete="false"
          clearable
          maxlength="8"
          placeholder="请输入客户简称"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户等级" prop="grade" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.价格等级, value: row.grade })">
        <el-select
          v-model="form.grade"
          filterable
          clearable
          placeholder="请输入客户等级"
        >
          <el-option
            v-for="dict in dicts[DictDirection.价格等级]"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="form.password"
          show-password
          clearable
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="form.type"
          filterable
          clearable
          placeholder="请输入类型"
        >
          <el-option
            v-for="dict in dicts[DictDirection.客户类型]"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictLabel"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款账号" prop="collectionAccount">
        <el-select
          v-model="form.collectionAccount"
          filterable
          collapse-tags
          multiple
          clearable
          placeholder="请输入收款账号"
        >
          <el-option
            v-for="dict in dicts[DictDirection.收款账户]"
            :key="dict.id"
            :label="dict.accountNo"
            :value="dict.id"
          >
            <el-row class="collectionAccount-info">
              <el-col :span="24">
                <span>{{ dict.accountNo }}</span>
              </el-col>
              <el-col :span="24"> 
                <span>{{ dict.bankDeposit }} - {{ dict.organizationName }}</span>
              </el-col>
            </el-row>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          v-model="form.address"
          clearable
          placeholder="请输入地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="telephone">
        <el-input
          v-model.trim="form.telephone"
          clearable
          placeholder="请输入电话"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="form.email"
          clearable
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="chargePerson">
        <el-input
          v-model="form.chargePerson"
          clearable
          placeholder="请输入负责人"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人手机号" prop="chargePersonTel">
        <el-input
          v-model="form.chargePersonTel"
          clearable
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
          placeholder="请输入负责人手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属机构" prop="site" :formatter="(row) => dicts.getDictLabel({ dict: DictDirection.收货站点, value: row.site })">
        <el-select
          v-model="form.site"
          filterable
          clearable
          placeholder="请输入所属机构"
        >
          <el-option
            v-for="dict in dicts[DictDirection.收货站点]"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务员" prop="businessManager">
        <el-select
          v-model="form.businessManager"
          filterable
          clearable
          placeholder="请输入业务员"
        >
          <el-option
            v-for="dict in dicts[DictDirection.员工信息]"
            :key="dict.id"
            :label="dict.nickName"
            :value="dict.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客服员" prop="customerService">
        <el-select
          v-model="form.customerService"
          filterable
          clearable
          placeholder="请输入客服员"
        >
          <el-option
            v-for="dict in dicts[DictDirection.员工信息]"
            :key="dict.id"
            :label="dict.nickName"
            :value="dict.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结算员" prop="settlementClerk">
        <el-select
          v-model="form.settlementClerk"
          filterable
          clearable
          placeholder="请输入结算员"
        >
          <el-option
            v-for="dict in dicts[DictDirection.员工信息]"
            :key="dict.id"
            :label="dict.nickName"
            :value="dict.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提货员" prop="deliveryMan">
        <el-select
          v-model="form.deliveryMan"
          filterable
          clearable
          placeholder="请输入提货员"
        >
          <el-option
            v-for="dict in dicts[DictDirection.员工信息]"
            :key="dict.id"
            :label="dict.nickName"
            :value="dict.userName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="余额" prop="balance">
        <el-input v-model="form.balance" clearable disabled></el-input>
      </el-form-item>
      <el-form-item label="佣金" prop="commission">
        <el-input
          v-model="form.commission"
          clearable
          placeholder="请输入佣金"
        ></el-input>
      </el-form-item>
      <el-form-item label="录单状态" prop="recordingStatus">
        <el-radio-group v-model="form.recordingStatus">
          <el-radio
            v-for="dict in dicts[DictDirection.客户端开关]"
            :key="dict.dictValue"
            :label="dict.dictValue"
          >
            {{ dict.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开通客户端" prop="isOpenAccount">
        <el-radio-group v-model="form.isOpenAccount">
          <el-radio
            v-for="dict in dicts[DictDirection.客户端开关]"
            :key="dict.dictValue"
            :label="dict.dictValue"
          >
            {{ dict.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="可预订舱方数" prop="bookableProportion">
        <el-tooltip
          effect="dark"
          content="-1表示无限制，0表示无法订舱，其他值表示可预定方数"
          placement="top"
        >
          <el-input-number
            v-model="form.bookableProportion"
            :controls="false"
            disabled
            :min="-1"
          ></el-input-number>
        </el-tooltip>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item label="营业执照" prop="businessLicenseFiles">
            <ImageUpload v-model="form.businessLicenseFiles" v-model:fileList="form.fileList" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同" prop="contractFiles">
            <ImageUpload v-model="form.contractFiles" v-model:file-list="form.fileList" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  ref,
  defineProps,
  getCurrentInstance,
  defineAsyncComponent,
  watch,
} from 'vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
// import { getAreaAndWareHouse } from '@/api/basicConfig/salesPrice'
import ImageUpload from '@/components/ImageUpload/index.vue'
import {

  editData,
  addData,
  delImg,
  updataGrade,
  modifyBooking,
  editSalemans,
  getCustomList,
} from '@/api/clientManger'
// 接受父组件的customerCode
const addTitle = ref(null)
const openCustomeInfo = ref(false)
const loading = ref(false)
const dicts = useDicts()
dicts.setDicts(DictDirection.价格等级)
dicts.setDicts(DictDirection.客户类型)
dicts.setDicts(DictDirection.收货站点)
dicts.setDicts(DictDirection.员工信息)
dicts.setDicts(DictDirection.是否禁用字典)
dicts.setDicts(DictDirection.收货站点) 
dicts.setDicts(DictDirection.收款账户) 

const emit = defineEmits(['changList', 'update:openCustomeInfo'])
// 新增表单状态
const 
  // 新增表单标题
  // 修改可预定方数
  quantityOpen = ref(false),
  // 修改客户等级
  priceOpen = ref(false),
  // 批量修改业务员
  salesmanOpen = ref(false),
  // 新增表单
  form = ref({
    id: undefined,
    status: '1',
    roleId: 99,
    wholeName: undefined,
    customerName: undefined,
    password: undefined,
    type: undefined,
    address: undefined,
    telephone: undefined,
    email: undefined,
    chargePerson: undefined,
    chargePersonTel: undefined,
    site: undefined,
    businessManager: undefined,
    customerService: undefined,
    settlementClerk: undefined,
    deliveryMan: undefined,
    balance: undefined,
    commission: undefined,
    recordingStatus: undefined,
    isOpenAccount: undefined,
    grade: undefined,
    bookableProportion: undefined,
    businessLicenseFiles: [],
    contractFiles: [],
    bankDeposit: undefined,
    collectionAccount: undefined,
  }),
  // 批量修改客户等级
  gradeForm = ref({
    grade: undefined,
  }),
  // 批量修改业务员
  salesForm = ref({
    businessManager: undefined,
  }),
  canUpload = ref(null),
  // 查询
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    custCodeList: undefined,
    wholeName: undefined,
    simpleName: undefined,
    status: undefined,
    grade: undefined,
  }), editForm = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $validateForm },
      },
    },
  } = getCurrentInstance()

// 规则
const rules = {
  wholeName: [{ required: true, message: '请输入客户全称', trigger: 'blur' }],
  simpleName: [
    { required: true, message: '请输入客户简称', trigger: 'blur' },
  ],
  type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  telephone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  chargePerson: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
  ],
  chargePersonTel: [
    { required: true, message: '请输入负责人电话', trigger: 'blur' },
  ],
  businessManager: [
    { required: true, message: '请输入业务员', trigger: 'blur' },
  ],
  grade: [{ required: true, message: '请输入等级', trigger: 'blur' }],
  areaCode: [
    {
      required: true,
      message: '请输入等级',
      trigger: ['blur', 'change'],
    },
  ],
  // businessLicenseFiles: [{ required: true, message: '请上传营业执照', trigger: ['change'] }],
}

// 重置新增、修改表单
const reset = () => {
  form.value = {
    id: undefined,
    status: '1',
    roleId: 99,
    wholeName: undefined,
    simpleName: undefined,
    password: undefined,
    type: undefined,
    address: undefined,
    telephone: undefined,
    email: undefined,
    chargePerson: undefined,
    chargePersonTel: undefined,
    areaCode: undefined,
    businessManager: undefined,
    customerService: undefined,
    settlementClerk: undefined,
    deliveryMan: undefined,
    balance: undefined,
    commission: undefined,
    recordingStatus: undefined,
    isOpenAccount: undefined,
    grade: undefined,
    bookableProportion: undefined,
    businessLicenseFiles: [],
    contractFiles: [],
    bankDeposit: undefined,
    collectionAccount: undefined,
  }
  $resetForm(editForm.value)
}
// 重置修改客户等级
const resetGrade = () => {
  gradeForm.value = {
    grade: undefined,
  }
  $resetForm(gradeForm.value)
}
// 重置修改业务员
const resetSalesMan = () => {
  salesForm.value = {
    businessManager: undefined,
  }
}
const handleDelImg = (item) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => {
    item.url = null
    item.show = false
    console.log(item)
  })
  .catch(() => {
    ElMessage.info('取消删除')
  })
}

// 取消新增
const cancel = () => {
  reset()
  emit('update:openCustomeInfo', false)
}
/* 确定新增，修改客户信息---start */
const submitForm = () => {
  $validateForm(editForm.value, () => {
    if (form.value.id != undefined) {
      editData(form.value).then(res => {
        if (res.code === 200) {
          form.value = res.data
          ElMessage.success('修改成功')
          emit('changList')
          openCustomeInfo.value = false
        }
      })
    } else {
      addData(form.value).then(res => {
        if (res.code === 200) {
          ElMessage.success('新增成功')
          reset()
          emit('changList')
          openCustomeInfo.value = false
        }
      })
    }
  })
}
const idss = ref(null)
const getList = () => {
  loading.value = true
  const id = idss.value
  getCustomList(id).then(res => {
    form.value = res.data
    loading.value = false
  }).finally(() => {
    loading.value = false
  })
}
/* 确定新增，修改客户信息---end */
defineExpose({
  openCustomeInfo,
  addTitle,
  quantityOpen,
  priceOpen,
  salesmanOpen,
  idss,
  getList,
})
</script>
<style lang="less" scoped>
.collectionAccount-info {
  line-height: initial;
  padding-bottom: 4px;
  padding-top: 4px;
  .el-col {
    line-height: 1.5;
  }
  .el-col:last-child {
    line-height: 1;
    color: #dcdfe6;
  }
}
/deep/.el-form-item__content {
  width: 200px;
}
</style>
